<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>APP info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/today.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/appInfo.css">
</head>
<body>
<div class="top-nav">
    <a href="search.html" class="back-btn"><span class="back-icon">&lt;</span>搜索</a>
    <div class="nav-center-box">
        <div class="tiny-icon flex-center">
            <img src="img/application/smile.jpg">
        </div>
    </div>
    <div class="application-get">
        <div class="app-get-btn bg-blue">
            <a href="#">获取</a>
        </div>
    </div>
</div>
<div class="bottom-nav">
    <ul>
        <li onclick="chooseDisplay(0)" class="active">
            <div><p class="iconfont">&#xe67c;</p><a href="#">Today</a></div>
        </li>
        <li onclick="chooseDisplay(1)">
            <div><p class="iconfont">&#xe760;</p><a href="#">游戏</a></div>
        </li>
        <li onclick="chooseDisplay(2)">
            <div><p class="iconfont">&#xe619;</p><a href="#">App</a></div>
        </li>
        <li onclick="chooseDisplay(3)">
            <div><p class="iconfont">&#xe640;</p><a href="#">更新</a></div>
        </li>
        <li onclick="chooseDisplay(4)">
            <div><p class="iconfont">&#xe633;</p><a href="#">搜索</a></div>
        </li>
    </ul>
</div>

<div class="content">
    <div class="large-icon-info">
        <div class="large-icon">
            <img src="img/application/smile.jpg">
        </div>
        <div class="app-info">
            <h4>爱奇艺纳逗-最全短视频</h4>
            <p>最新热门影视短视频</p>
            <div class="btn-groups">
                <div class="application-get">
                    <div class="app-get-btn bg-blue">
                        <a href="#">获取</a>
                    </div>
                </div>
                <div style="flex-grow: 1"></div>
                <div class="application-get">
                    <div class="app-get-btn btn-round bg-blue">
                        <a href="#">...</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="app-start">
        <div>
            <h4>4.2</h4>
            <p>7,040个评分</p>
        </div>
        <div style="flex-grow: 1"></div>
        <div>
            <h4>17+</h4>
            <p>年龄</p>
        </div>
    </div>
    <div class="app-shot-group swiper-container">
        <div class="swiper-wrapper">
            <div class="app-shot swiper-slide">
                <img src="img/screenshot/shot1.jpg">
            </div>
            <div class="app-shot swiper-slide">
                <img src="img/screenshot/shot1.jpg">
            </div>
            <div class="app-shot swiper-slide">
                <img src="img/screenshot/shot1.jpg">
            </div>
        </div>


    </div>
    <div class="dev-intro">
        <p>爱奇艺纳豆，让时光更有趣</p>
        <p>精彩短视频社区，百万原创短视频，最全热门影视综应有尽有<a class="more">更多</a></p>
        <div class="dev-info">
            <a class="more">QIYI</a>
            <p>开发者</p>
        </div>
    </div>
    <div class="user-comments">
        <div class="slide-app-list-header">
            <h4>评分及评论</h4>
            <a>查看全部</a>
        </div>
        <div class="app-point">
            <h1>4.2</h1>
            <p>满分5分</p>
        </div>
        <div class="slide-comment swiper-container">
            <div class="swiper-wrapper">
                <div class="user-comment-item swiper-slide bg-gray">
                    <div class="comment-card">
                        <div class="comment-header">
                            <h5>我是爱奇艺头条的资深用户</h5>
                            <div style="flex-grow: 1;"></div>
                            <p>一年前</p>
                        </div>
                        <div class="comment-body">
                            <p>自从用了爱奇艺头条就没在用过其他类似软件了。他根据用户的不同需求提供不同的内容，针对性很强，希望爱奇艺头条越做越好</p>

                        </div>

                    </div>
                </div>
                <div class="user-comment-item swiper-slide bg-gray">
                    <div class="comment-card">
                        <div class="comment-header">
                            <h5>老铁们双击点赞666</h5>
                            <div style="flex-grow: 1;"></div>
                            <p>一年前</p>
                        </div>
                        <div class="comment-body">
                            <p>东北的老铁们你们在哪里？双击点赞来一波</p>

                        </div>

                    </div>
                </div>
                <div class="user-comment-item swiper-slide bg-gray">
                    <div class="comment-card">
                        <div class="comment-header">
                            <h5>HTML+CSS真的是太爽了</h5>
                            <div style="flex-grow: 1;"></div>
                            <p>一年前</p>
                        </div>
                        <div class="comment-body">
                            <p>赞同的麻烦给我点个赞，谢谢。</p>

                        </div>

                    </div>
                </div>
                <div class="user-comment-item swiper-slide bg-gray">
                    <div class="comment-card">
                        <div class="comment-header">
                            <h5>点个🔨赞</h5>
                            <div style="flex-grow: 1;"></div>
                            <p>一年前</p>
                        </div>
                        <div class="comment-body">
                            <p>自从开始写前端，头也不疼了，腰也不算了，经济好起来了，花销降下去了。因为不需要再去花钱买洗发水了</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dev-log">
            <div class="slide-app-list-header">
                <h4>新功能</h4>
                <a>历史版本记录</a>
            </div>
            <div class="version">
                <p>版本 3.3.10</p>
                <div style="flex-grow: 1"></div>
                <p>3个月前</p>
            </div>
            <div class="dev-log-content">
                <p>1、技术GG优化了你看不懂的代码，使用更流畅啦。</p>
                <p>2、视觉mm设计了更好看的界面，操作更简单啦<a class="more">更多</a></p>
            </div>
        </div>
    </div>

</div>
</body>
<script src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.app-shot-group', {
        slidesPerView: 1.5,
        spaceBetween: 20
    });
    var swiper2 = new Swiper('.slide-comment');
</script>
</html>